<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            width: 980px;
            height: 1386px;
            margin: auto;
            border: 1px solid black;
        }

        .container {
            width: 892px;
            height: 100%;
            margin: auto;
            overflow:auto;
        }

        header {
            border-bottom: 2px #938e8c solid;
            /* just clear float */
            overflow: hidden;
        }


        p {
            margin: 0px;
            padding: 0px;
        }


        .web-side {
            float: left;
            width: 110px;
            height: 61px;
            padding-top: 4.5%;
            padding-left: .5%;
            background-color: rgb(250, 116, 116);
            color: #ffffff;
            font-size: 12px;
            font-family: "SimHei", Arial, Helvetica, sans-serif;
        }

        .date {
            float: right;
            margin-top: 4.5%;
            font-size: 12px;
            font-family: "SimHei", Arial, Helvetica, sans-serif;
            color: #d45d5c;
        }

        .first-section,
        .second-section,
        .third-section {
            margin-top: 20px;
        }

        .first-section {
            /* position: relative; */
        }


        .first-section-img {
            /* 通过背景图片实现蒙版效果 */
            display: inline-block;
            width: 641px;
            height: 301px;
            background-image: url(1.jpeg);
            background-size: 100% 100%;
        }

        .first-section-img div {
            height: 100%;
            border-left: 191px solid;
            border-right: 191px solid;
            border-color: transparent rgba(250, 116, 116, 0.5) transparent rgba(142, 250, 138, 0.5);
        }

        /* .first-section-img::before{
            content: "";
            background-color: rgba(158, 235, 144, 0.5);
            width: 191px;
            height: 301px;
            position: absolute;
            left: 0px;
            top:0px;
        } */

        .first-section-rightside {
            /* create BFC inorder to make tow cols */
            float: right;
            width: 203px;
            border-top: 2px solid #cc8091;
        }

        .first-section-rightside .about,
        .first-section-rightside .technologe {
            text-decoration: underline;
            text-transform: uppercase;
            font-size: 24px;
            color: #000000;
            font-family: "Microsoft YaHei";
            line-height: 40px;
        }

        .first-section-rightside .about,
        .first-section-rightside .technologe {
            font-size: 28px;
        }

        .first-section-rightside .long-word {
            font-size: 12px;
            color: #676767;
            line-height: 10px;
            font-family: "KaiTi";
        }

        .first-section-rightside p:nth-child(4) {
            font-size: 116px;
            color: #75b86b;
            font-family: Arial, Helvetica, sans-serif;
            font-style: italic;
            font-weight: 700;
        }

        .first-section-rightside span {
            font-size: 55px;
            font-family: "Microsoft YaHei";
            color: #cc8091;
            float: left;
        }

        .first-section-rightside .explan {
            overflow: hidden;
            padding-left: 5px;
            padding-top: 5px;
        }

        .first-section-rightside .explan :nth-child(1) {
            margin-top: .5rem;
            font-size: 21px;
            font-family: "Microsoft YaHei";
            color: #cc8091;
        }

        .first-section-rightside .explan :nth-child(2) {
            font-size: 12px;
            font-family: "Microsoft YaHei";
            color: #cc8091;
        }

        .second-section::after {
            /* clear float */
            content: "";
            visibility: hidden;
            display: block;
            clear: both;
        }

        .second-section article {
            float: left;
            width: 210px;
            margin-right: 16px;

        }

        .second-section h2 {
            font-size: 16px;
            font-weight: 700;
            text-decoration: underline;
            text-transform: capitalize;
            color: #418c59;
        }

        .second-section p {
            font-family: "宋体", Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #767777;
            text-align: justify;
        }

        .second-section .second-section-article2 h2 {
            color: #d2994f;
        }

        .second-section .second-section-article3 h2 {
            color: #cd4a48;
        }

        .second-section .second-section-article2 p {
            color: #231815;
            font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
            opacity: .7;
        }

        .second-section .second-section-article3 div {
            margin-top: 16px;
        }

        .second-section .second-section-article3 div span {
            color: #cd4a48;
            font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
            opacity: .7;
            font-style: italic;
        }

        .third-section {
            /* clear float */
            overflow: hidden;
        }

        .third-section>article,
        .third-section>section {
            float: left;

        }

        .third-section>article {
            width: 415px;
            margin-right: 16px;
        }

        .third-section>article h2,
        .third-section>article h3 {
            font-size: 36px;
            color: #11456b;
            font-family: "HeiTi", Arial, Helvetica, sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            margin: 0;
            margin-bottom: 16px;
        }

        .third-section>article h2 span {
            font-size: 50px;
            color: #f5e327;
            font-style: italic;
        }

        .third-section>article h3 {
            font-size: 33px;
            border-bottom: 2px solid #11456b;
            padding-bottom: .5rem;
        }

        .third-section>article p:nth-of-type(1)::first-letter {
            font-size: 50px;
            color: #f5e327;
            font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
            float: left;
            margin-right: 10px;
            line-height: 4rem;
        }

        .third-section>article p {
            text-align: justify;
            font-size: 12px;
            color: #767777;
            font-family: "宋体", Arial, Helvetica, sans-serif;
        }

        .third-section>article p:nth-of-type(1n+2) {
            text-indent: 2em;
        }



        .third-section>article img {
            float: right;
            width: 150px;
            margin: 1rem;
            margin-right: 0;
        }

        .third-section>section {
            width: 458px;
            position: relative;
        }


        .font-technologe {
            position: relative;
            width: 458px;
            height: 275px;
            background-image: url("2.jpg");
            background-size: 100% 100%;
            margin-bottom: 1rem;
        }

        .font-technologe p {
            position: absolute;
            bottom: 0px;
            height: 61px;
            width: 100%;
            vertical-align: bottom;
            padding: 10px 30px;
            font-size: 26px;
            color: #ffffff;
            font-family: "Microsoft YaHei",Arial, Helvetica, sans-serif;
            background-color: rgba(41, 41, 41, 0.5);
        }

        .font-technologe p::before{
            content: "";
            height: 44px;
            border-left: 3px solid #72b16a;
            margin-right: .5rem;
        }

        .font-technologe p span {
            font-size: 12px;
            color: #72b16a;
            font-style: italic;
            letter-spacing: 140%;
        }     

        
        .third-section-article2 {
            width: 459px;
            height: 318px;
            background-color: #f3e9db;
            text-align: right;
            padding: 1rem 1rem;
        }

        .third-section-article2 > p{
            margin-bottom:20px;
            font-family: "宋体",Arial, Helvetica, sans-serif;
            font-style: italic;
            color: black;
            font-size: 12px;
        }

        .third-section-article2 > p:nth-child(-n+3):before {
            content: "";
            border: 8px solid;
            border-color: transparent transparent black transparent;
            position: relative;
            top: -10px;
            right: 10px;
        }

        .third-section-article2 > p:last-child{
            margin-left:auto;
            text-align: justify;
            width: 150px;
            font-size: 14px;
            color: #5a5b5b;
            font-family: "黑体",Arial, Helvetica, sans-serif;
            line-height: 16px;
            position: relative;
            text-indent: 2em;
        }

        .third-section-article2 > p:last-child::before {
            position: absolute;
            content: open-quote;
            font-size: 24px;
            color: #d45d5c;
            top: 5px;
            left: -30px;

        }

        .third-section-article2 > p:last-child::after {
            content: "\"";
            position: absolute;
            bottom: -10px;
            right: 0;
            color:#d45d5c;
            font-size: 24px;
        }

        .little-tips {
            position: absolute;
            background-color: rgb(246, 112, 112);
            width: 260px;
            height: 160px;
            bottom: 0;
            left: 0;
            padding: 15px;
            text-align: left;
        }

        .little-tips p:first-child {
            float: left;
            font-size: 110px;
            color: white;
            font-family: "Microsoft YaHei",Arial, Helvetica, sans-serif;
        }

        .little-tips p:first-child::after{
            content: "";
            display: inline-block;
            border-left: 2px solid white;
            height: 86px;
            width: 0px;
            margin: 0 8px;
        }

        .little-tips p:nth-child(2){
            margin-top: 1em;
            font-size: 21px;
            color: white;
            font-family: "黑体",Arial, Helvetica, sans-serif;
            font-style: italic;
            line-height: 24px;
        }

        .little-tips p:nth-child(3){
            font-size: 12px;
            color: white;
            font-family: "黑体",Arial, Helvetica, sans-serif;
        }

        footer p{
            border-top: 1px solid #938e8c;
            text-align: right;
            padding-top: 5px;
            margin-top: 2rem;
            font-size: 12px;
            font-family: "黑体",Arial, Helvetica, sans-serif;
            color: #d45d5c;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <p class="web-side">ife.baidu.com</p>
            <p class="date">2016.03</p>
        </header>
        <main>
            <section class="first-section">
                <span class="first-section-img">
                    <!-- 通过背景图片实现蒙版的效果 -->
                    <div></div>
                </span>
                <article class="first-section-rightside">
                    <p class="about">about</p>
                    <p class="technologe">technologe</p>
                    <p class="long-word">About technologe about technologe about technologe</p>
                    <p>700</p>

                    <span>3.2</span>
                    <div class="explan">
                        <p>css</p>
                        <p>csscsscsscsscss</p>
                    </div>
                </article>
            </section>
            <section class="second-section">
                <article class="second-section-article1">
                    <h2>what</h2>
                    <p>
                        块级元素在页面中以块的形式展示——相对于前面的内容它会出现在新的一行，其后的内容也会被挤到下一行，块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
                    </p>
                </article>
                <article class="second-section-article2">
                    <h2>
                        when
                    </h2>
                    <p>
                        从旧系统导出1-4月累计支出数据，若统计项目支出，则在项目类型中剔除（1、2、3），同时剔除功能科目为230转移支付、231债务还本支出（这两个科目为线下科目）
                        从新系统-已支出数据查询表导出5月后累计支出数据，按资金性质分类。若统计项目支出，则在项目类型中剔除（人员类1、运转类中公用经费类21），同时剔除功能科目为230转移支付、231债务还本支出（这两个科目为线下科目），镇街的要先发一下给韵韵姐，统计部门支出按单位编码的前三位统计。
                    </p>
                </article>
                <article class="second-section-article3">
                    <h2>how</h2>
                    <p>
                        所有支出数据均做好经济分类支出合并。
                        使用数据迁移中变化的单位名字更新数字财政导出的支出数据明细。（做新旧系统单位名称的对应），注意食药监的对应关系。
                        通过单位名称+项目名称+业务科室匹配新旧支出系统的单位名称、项目、业务科室、总指标、支出数据，将新系统的发生数匹配到旧系统的支出数据中。
                    </p>
                    <div>
                        <p>what--------<span>40%</span></p>
                        <p>what--------<span>30%</span></p>
                        <p>what--------<span>30%</span></p>
                    </div>

                </article>
            </section>
            <section class="third-section">
                <article class="third-section-article1">
                    <h2>
                        <span>the</span> technologe of front
                    </h2>
                    <h3>
                        前端技术领域
                    </h3>
                    <p>
                        从旧系统导出1-4月累计支出数据，若统计项目支出，则在项目类型中剔除（1、2、3），同时剔除功能科目为230转移支付、231债务还本支出（这两个科目为线下科目）
                        从新系统-已支出数据查询表导出5月后累计支出数据，按资金性质分类。若统计项目支出，则在项目类型中剔除（人员类1、运转类中公用经费类21），同时剔除功能科目为230转移支付、231债务还本支出（这两个科目为线下科目），镇街的要先发一下给韵韵姐，统计部门支出按单位编码的前三位统计。
                    </p>
                    <p>
                        123从旧系统导出1-4月累计支出数据，若统计项目支出，则在项目类型中剔除（1、2、3），同时剔除功能科目为230转移支付、231债务还本支出（这两个科目为线下科目）<img
                            src="3.jpg">
                    </p>
                    <p> 从新系统-已支出数据查询表导出5月后累计支出数据，按资金性质分类。若统计项目支出，则在项目类型中剔除（人员类1、运转类中公用经费类21），同时剔除功能科目为230转移支付、231债务还本支出（这两个科目为线下科目），镇街的要先发一下给韵韵姐，统计部门支出按单位编码的前三位统计。从旧系统导出1-4月累计支出数据，若统计项目支出，则在项目类型中剔除（1、2、3），同时剔除功能科目为230转移支付、231债务还本支出（这两个科目为线下科目）
                        同时剔除功能科目为230转移支付、231债务还本支出（这两个科目为线下科目）同时剔除功能科目为230转移支付、231债务还本支出
                    </p>

                </article>
                <section class="third-section-rightside">
                    <div class="font-technologe">
                        <p>
                            前端技术<span>前端技术前端技术前端技术</span>
                        </p>
                    </div>

                    <article class="third-section-article2">
                        <p>前端技术前端技术．．．．．．．．．．．．．．．．．．．．．．<span>前段</span></p>
                        <p>前端技术前端技术前端技术．．．．．．．．．．．．．．．．．．<span>前段</span></p>
                        <p>前端技术前端技术前端技．．．．．．．．．．．．．．．．．．．<span>前段</span></p>
                        <div class="little-tips">
                            <p>0</p>
                            <p>one two three for five</p>
                            <p>hello world hello world hello world</p>
                        </div>
                        <p>hello world hello world hello world hello world hello world hello world hello world</p>
                    </article>
                </section>
            </section>
        </main>
        <footer>
            <p>ife.baidu.com</p>
        </footer>
    </div>
</body>

</html>